<!-- @module messageDetailBox -->
<!-- @author: YunTao.Li -->
<!-- @description:  -->
<!-- @since: 2020-03-19 13:01:23 -->

<template>
  <el-dialog title="站内消息" :visible.sync="dialogFormVisible" width="60%" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <el-form ref="messageForm" :model="messageFormObject" label-width="120px" size="mini">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
          <el-form-item label="消息标题" prop="msgTitle">
            {{ messageFormObject.msgTitle }}
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
          <el-form-item label="发送人" prop="msgTitle">
            {{ messageFormObject.msgFrom }}
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
          <el-form-item label="时间" prop="msgTitle">
            {{ messageFormObject.msgTime }}
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
          <el-form-item label="消息内容" prop="msgTitle">
            {{ messageFormObject.msgContent }}
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" style="margin:10px;text-align: center">
      <el-button @click="onCancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      messageFormObject: {
        msgId: '',
        msgTitle: '',
        msgContent: '',
        msgTime: '',
        msgFrom: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    toggele(data) { // 显示此窗口或隐藏
      if (this.dialogFormVisible) {
        this.dialogFormVisible = false
      } else {
        this.dialogFormVisible = true
      }
      if (data) {
        this.messageFormObject.msgId = data.mcId
        this.messageFormObject.msgTitle = data.mcTitle
        this.messageFormObject.msgContent = data.mcContentHtml
        this.messageFormObject.msgFrom = data.mcFrom
        this.messageFormObject.msgTime = data.mcSendtime
      }
    },
    onCancel() { // 取消
      this.toggele()
      this.resetFormData()
      this.$emit('submitFunc')
    },
    resetFormData() {
    }
  }
}
</script>

<style>
/* .el-date-picker{
  width: 80%
} */
</style>
